<template>
	<div class="movie-list">
		<div
			class="movie-list-item"
			v-for="item in props.movieList"
			:key="item"
			@click="goDetails(item._id)"
		>
			<img v-layz src="" :data-src="item.movieImg" />
			<h4>{{ item.movieName }}</h4>
			<div class="list-item-data">
				<h5>{{ item.movieName }}</h5>
				<p>上映时间:{{ item.movieTime }}</p>
				<p>
					类型:
					<a-space>
						<a-tag
							v-for="x in item.movieCategory"
							size="small"
							:key="x"
							>{{ x }}</a-tag
						>
					</a-space>
				</p>
			</div>
		</div>
	</div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const props = defineProps({
		movieList: Object
	}),
	router = useRouter()
// 跳转到详情页
function goDetails(id) {
	router.push(`/movieDetails/${id}`)
}
</script>

<style lang="scss" scoped>
// 电影列表
.movie-list {
	display: flex;
	flex-wrap: wrap;
	// justify-content: space-between;
	align-items: center;
	gap: var(--normal-distance);
	background-color: var(--main-2-bg);
	.movie-list-item {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 10rem;
		flex-grow: 0;
		min-width: 0;
		font-size: 0.8rem;
		z-index: 100;
		cursor: pointer;
		color: var(--fc-bg);
		&:hover {
			transform: scale(1.1);
		}
		&:hover > .list-item-data {
			visibility: visible;
		}
		img {
			width: 150px;
			height: 200px;
		}
		.list-item-data {
			position: absolute;
			display: flex;
			flex-direction: column;
			padding: var(--normal-sm-distance);
			bottom: 0;
			background-color: var(--main-2-bg);
			color: var(--fc-bg);
			visibility: hidden;
			& > * {
				margin: 0;
				margin-top: var(--normal-sm-distance);
			}
		}
	}
}
:deep(.arco-tag.arco-tag-size-small.arco-tag-checked) {
	background-color: var(--main-bg);
	color: var(--fc-bg);
}
</style>
